<template>
    <div class="sign page">
        <div class="con">


            <div class="form">

                <txt-input v-model="tem.userName" label="联系人" place-holder="联系人"></txt-input>
                <txt-input v-model="tem.phone" type="number" label="手机号" place-holder="手机号码"></txt-input>
<!--                <txt-input v-model="tem.phone" type="number" label="验证码" place-holder="验证码"></txt-input>-->
                <txt-input @click.native="showDefault" v-model="tem.courseName" :disabled="true"  label="开课班" place-holder="选择班"></txt-input>


                <cube-textarea placeholder="备注" class="area" v-model="tem.remark"></cube-textarea>
                <!--                <txt-input v-model="tem.remark" label="备注" place-holder="备注"></txt-input>-->
            </div>

            <radius-btn @click.native="confirm" txt="完成" style="margin-top: 0.4rem"></radius-btn>

        </div>
    </div>
</template>

<script>
    import txtInput from "@/components/base/txt-input"
    import radiusBtn from "@/components/base/radius-btn"
    import {mergeAddress} from "@/api/order";
    import {isPhone} from "@/common/js/num";
    import * as  Toast from '@/toast'
    import * as  Dialog from '@/dialog'
    import {list,sign,getSign} from '@/api/course'

    export default {
        created() {
            //这是更新
            if(this.$route.query.signId){
                getSign(this.$route.query.signId).then(res=>{
                    this.courseList = res.extra.courses
                    this.tem = res.data
                    this.tem.courseName = res.extra.courseName
                })
            }else {
                this.tem.goodsId = this.$route.query.goodsId
                this.tem.cardId = this.$route.query.cardId
                this.listCourse()
            }
        },
        data() {
            return {
                courseList:[],
                tem: {
                    cardId: null,
                    goodsId: null,
                    name: null,
                    courseId: null,
                    courseName: null,
                    userName: null,
                    phone: null,
                    remark: ''
                }
            }
        },
        computed: {
            options(){
                let arr = []
                this.courseList.forEach(c=>{
                    let a = {content:c.name,value:c.id}
                    arr.push(a)
                })
                return arr
            }
        },
        methods: {
            listCourse(){
                list(this.tem.goodsId).then(res => {
                    if(res.data.length<1){
                        this.showAlert()
                    }
                    this.courseList = res.data
                })
            },
            showDefault() {
                this.$createActionSheet({
                    title: '选择开班',
                    data: this.options,
                    onSelect: (item, index) => {
                        this.tem.courseId = item.value
                        this.tem.courseName = item.content
                        // this.$createToast({
                        //     txt: `Clicked ${item.content}`,
                        //     time: 1000
                        // }).show()
                    }
                }).show()
            },
            showAlert() {
                Dialog.showAlert('尚未开课!').then(()=>{
                    this.$router.back()
                })
                // this.$createDialog({
                //     type: 'alert',
                //     title: '尚未开课',
                //     content: '',
                //     icon: 'cubeic-alert',
                //     onConfirm:()=>{
                //         this.$router.back()
                //     }
                // }).show()
        },
        turn(path) {
            this.$router.push(path)
        },
        confirm() {
            if (!this.tem.userName) {
                Toast.showInfo("联系人不能为空")
                return
            }
            if (!this.tem.phone) {
                Toast.showInfo("手机号码不能为空!")
                return
            }
            if (!this.tem.courseId) {
                Toast.showInfo("请选择开课班级!")
                return;
            }
            sign(this.tem).then(res=>{
                Dialog.showAlert('报名成功!').then(()=>{
                    this.$router.push("/confirm")
                })
            })

        }
    }
    ,
    components: {
        txtInput, radiusBtn
    }
    }
</script>

<style scoped lang="stylus">
    .sign
        z-index 2
        background url("~@/assets/cbg.png") no-repeat $page-bg
        background-size 100% auto
        height 100%

        .con
            padding 10px 10px 0px 10px

        .area
            margin-top 10px


</style>